<template>
	<view>
		<!--pages/cardDetails/cardDetails.wxml-->
		<view class="all">
			<view class="list">
				<view class="card_style">
					<view class="card_img">
						<image :src="card.image_url"></image>
					</view>
					<view class="card_text">
						<view class="card_name">{{card.name}}</view>
						<view class="card_num">
							<view class="num_list">
								<view class="num_title">总次数</view>
								<view class="num_number">{{card.frequency }}</view>
							</view>
							<view class="num_list">
								<view class="num_title">已消费</view>
								<view class="num_number">{{card.use_num}}</view>
							</view>
							<view class="num_list">
								<view class="num_title">剩余次数</view>
								<view class="num_number">{{card.residue_num}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="card_details">
					<view class="headline">次卡详情</view>
					<view class="details_list">
						<view class="details_left">次卡名称：</view>
						<view class="details_right">{{card.name}}</view>
					</view>
					<view class="details_list">
						<view class="details_left">使用规则：</view>
						<view class="details_right">{{card.use_rule}}</view>
					</view>
					<view class="details_list">
						<view class="details_left">可用时段：</view>
						<view class="details_right">{{card.time_interval}}</view>
					</view>
					<view class="details_list">
						<view class="details_left">有效日期：</view>
						<view class="details_right">{{card.effective_time}}</view>
					</view>
					<view class="details_list">
						<view class="details_left">购买日期：</view>
						<view class="details_right">{{card.add_time}}</view>
					</view>
					<view class="details_list">
						<view class="details_left">可用门店：</view>
						<view class="details_right" v-for="(item, key) in card.store_data" :key="key">
							<view>{{item}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="card.is_use==1&&card.residue_num>0" class="buy_now" @tap="useNow">立即使用</view>
			<view v-else-if="card.is_use==2" class="buy_now buy-now-opacity">已用完</view>
			<view v-else-if="card.is_use==3" class="buy_now buy-now-opacity">已过期</view>
			<view v-else-if="card.is_use==4" class="buy_now buy-now-opacity">次卡异常</view>
		</view>
		<!-- 使用码 -->
		<view class="alert-mask" v-if="useCode" @tap="closeCode">
			<view class="alert-com" @tap.stop="refreshCode">
				<view class="alert-title">核销</view>
				<view class="Inventory-Box" @tap.stop="refreshCode">
					<view class="list_code">
						<w-barcode :options="barCodeoptions"></w-barcode>
					</view>
					<view class="list_number">
						<view>{{tempDynamicCode}}</view>
					</view>
					<view class="refresh_prompt">
						<image src="/static/images/refresh_button.png"></image>
						<text>点击条形码刷新</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/cardDetails/cardDetails.js
	var app = getApp().globalData;
	var wxbarcode = require("../../../utils/index.js");

	export default {
		data() {
			return {
				card: {},
				useCode: false,
				dynamicCode: "",
				tempDynamicCode: "",
				vip_card_id: "",
				barCodeoptions: {
					width: 550,
					height: 200,
					code: ''
				},
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var that = this;
			var id = options.card_id;
			getApp().globalData.sendRequest({
				url: '/SubCard/userCardInfo',
				type: "post",
				data: {
					vip_card_id: id
				},
				success: function(res) {
					if (res.status == 1) {
						that.setData({
							card: res.user_card,
							vip_card_id: id
						});

						if (res.user_card.residue_num > 0) {
							that.getUseCode();
						}
					} else {
						that.setData({
							card: null
						});
					}
				}
			});
		},

		methods: {
			//关闭
			closeCode: function() {
				var that = this;
				that.setData({
					useCode: false
				});
			},
			//立即使用
			useNow: function() {
				var that = this;
				that.setData({
					useCode: true
				});
				that.getUseCode();
			},
			//刷新条形码
			refreshCode: function() {
				var that = this;
				that.getUseCode();
			},
			// 获取条形码
			getUseCode: function(bol) {
				var that = this;
				getApp().globalData.sendRequest({
					url: '/SubCard/useCard',
					data: {
						vip_card_id: that.vip_card_id
					},
					success: (res) => {
						if (res.status == 1) {
							var tempDynamicCode = res.use_code.substr(0, 4);
							tempDynamicCode += ' ' + res.use_code.substr(4, 4);
							tempDynamicCode += ' ' + res.use_code.substr(8, 3);
							that.setData({
								dynamicCode: res.use_code,
								tempDynamicCode: tempDynamicCode
							});
							this.barCodeoptions.code = res.use_code
							// wxbarcode.barcode('barcode', res.use_code, 550, 200);
						}
					}
				});
			}
		}
	};
</script>
<style>
	@import "./cardDetails.css";
</style>
